<template>
	<el-row class="tac">
		<el-col :span="24">
			<el-menu :router="true" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
				default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
				<el-sub-menu :index="menus.menuId" v-for="menus in menuslist">
					<template #title>
						<el-icon>
							<location />
						</el-icon>
						<span>{{menus.menuName}}</span>
					</template>
					<el-menu-item :index="menuschild.path" v-for="menuschild in menus.children">{{menuschild.menuName}}
					{{menuschild.path}}</el-menu-item>
					<!-- <el-menu-item index="">用户维护</el-menu-item>
					<el-menu-item index="rolevue">角色维护</el-menu-item>
					<el-menu-item index="">部门维护</el-menu-item>
					<el-menu-item index="">dd</el-menu-item> -->

					<!-- 菜单维护(包含对菜单的增删改查)
					用户维护(包含用户的增删改查，及对用户角色的维护，能够根据用户ID和部门进行角色维护)
					角色维护（包含角色的增删改查及角色对菜单的维护）
					部门维护（包含部门的增删改查） -->

				</el-sub-menu>
				


			</el-menu>
		</el-col>
	</el-row>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	import request from '../utils/request'

	const menuslist = ref([])

	const handleOpen = () => {
		// console.log(key, keyPath)
	}
	const handleClose = () => {
		// console.log(key, keyPath)
	}
	const initdata = () => {
		//根据当前登录用户获取用户的菜单集合
		request.get("/users/getuserallmenus").then(function(res) {
			console.log(res.menusList)
			let s=arrayToTree(res.menusList,"menuId","parentId","children")
			console.log(s)
			menuslist.value=s
		}).catch(function(res) {

		})
	}

	// 生命周期钩子
	onMounted(() => {
		initdata()
	});

	function arrayToTree(items, id = 'id', parentId = 'parentId', children = 'children') {
		const result = [];
		const map = new Map();

		// 构建映射
		items.forEach(item => {
			map.set(item[id], {
				...item,
				[children]: []
			});
		});

		// 构建树
		items.forEach(item => {
			const parent = map.get(item[parentId]);
			if (parent) {
				parent[children].push(map.get(item[id]));
			} else {
				result.push(map.get(item[id]));
			}
		});

		return result;
	}
</script>